<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/header&footer.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./link/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </head>
  <style>

  </style>
  <body style="overflow: hidden;padding-top: 0.02px;">
    <!--解决position:fixed的margin-top塌陷问题-->
    <div id="header">
      <strong>IT 培优</strong>
      <ul id="nav">
        <li v-for="(navList,index) in navLists" :key="index" class="navList">
          <a
            :href="navList.url"
            :class="subpage === navList.url ? 'active' : ''"
            >{{ navList.name }}
          </a>
        </li>
      </ul>
      <div id="search"></div>
      <div id="searchblock">
        <input type="text" id="searchInput" placeholder="请输入搜索内容..." onfocus="this.placeholder=''" onblur="this.placeholder='请输入搜索内容...'" autocomplete="off">
        <img src="./static/search1.png" alt="" id="sBlockIcon" >
      </div>
      <img src="./static/search.png" alt="" id="searchIcon"  >
      
      <!-- <img src="static/schoolLogo.png" alt="" id="schoolIcon" /> -->
    </div>

    <!-- 主页 -->
    <div id="home">
      <div id="LunBo">
        <div id="carousel">
          <div id="shadow">
            <p class="title" id="title">欢 迎 来 到 I T 培 优</p>
            <p class="banners" id="banners1">我们一起，共同学习，共同进步</p>
            <p class="banners" id="banners2">Stay Hungry, Stay Foolish</p>

            <div class="carouselIndicators">
              <span
                v-for="(item,index) in slideList.length"
                :class="{'indicatorChangeColor':index===currentIndex,'indicator':index!=currentIndex}"
                @mouseover="change(index)"
              ></span>
              <!-- 轮播图控制小圈 -->
            </div>
          </div>
          <div id="carouselBlock">
            <div class="slideBlock">
              <!-- 过渡组件 -->
              <transition-group tag="ul" class="slideUL" name="list">
                <li
                  v-for="(list,index) in slideList"
                  :key="index+1"
                  v-show="index===currentIndex"
                >
                  <!-- 轮播图图片列表 -->
                  <img :src="list" class="carouselItem" alt="" />
                  <!-- 轮播图图片 -->
                </li>
              </transition-group>
            </div>
          </div>
        </div>
        <div class="trangleShadowLeft"></div>
        <!-- 白色左三角遮罩 -->
        <div class="trangleShadowright"></div>
        <!-- 白色右三角遮罩 -->
        <div id="downBlock">
          <img src="./static/down.png" alt="" />
          <!-- 向下图标 -->
        </div>
      </div>
      <div id="achievements">
        <div class="Achievements">
          <div class="AchievementsShadow">
            <div id="upBlock">
              <img src="static/up.png" alt="" />
              <!-- 向上图标 -->
            </div>
            <p class="AchievementsTitle">我们的经历</p>
            <p class="AchievementsBanners">Our Experiences</p>
            <div class="AchievementsNavOuter">
              <div class="AchievementsNavInner">
                <p class="AchievementsNavTest">IT培优成果展</p>
              </div>
            </div>
            <div
              v-for="(number,index) in numbers"
              v-bind:key="index"
              v-bind:id="achievementsId(index)"
              class="AchievementsModule"
            >
              <!-- 成果展展示框 -->
              <img
                :src="number.img"
                class="AchievementsModuleInsetImg"
                alt=""
              />
              <!-- 成果展展示框内图片 -->
              <div class="AchievementsModuleInset">
                <div class="AchievementsModuleInsetTitle">
                  {{ number.title }}
                </div>
                <!-- 成果展展示框内标题 -->
                <div class="AchievementsModuleInsetLine"></div>
                <!-- 成果展展示框内分割线 -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="footer">
      <div id="footerShadowLeft"></div>
      <!-- 底部左三角遮罩 -->
      <div id="footerShadowright"></div>
      <!-- 底部右三角遮罩 -->
      <p>地址：四川省成都市成龙大道二段1819号、四川师范大学成龙校区</p>
      <p>邮编：610101</p>
      <p>联系电话：11111111111 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 22222222222</p>
      <p><a href="">管理登录</a></p>
    </div>
    <p id="footerCopyright">Copyright © 2019 四川师范大学 IT培优</p>

    <script src="./js/main_vue.js"></script>
    <script src="./js/header_vue.js"></script>
    <script src="./js/header&footer.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>
